<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>探测 - {{ group.getTitle() }}</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1.0,minimum-scale=1">
    <script src="https://cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script>
	<style>body,html { margin: 0, padding: 0 }</style>
</head>
<body>
    <div id="main"></div>
    <script type="text/javascript">

		document.getElementById('main').style.width = window.innerWidth - 20 + 'px';
		document.getElementById('main').style.height = window.innerHeight - 20 + 'px';

		window.onresize = function() {
			document.getElementById('main').style.width = window.innerWidth + 'px';
			document.getElementById('main').style.height = window.innerHeight + 'px';
		}

        var title = '{{ group.getTitle() }}';
        var targets = [];
        var datas   = [];
        var url     = '/group/detect/{{ group.getId() }}';
        var timing  = {{ group.getTiming() }};
        var legend  = [];
		var xdata = []

{%for target in targets %}
            targets.push({id: {{ target.getId() }}, title: '{{ target.getTitle() }}', url: '{{ target.getUrl()  }}'});
            legend.push('{{ target.getTitle() }}');
{% endfor %}

        
        var myChart = echarts.init(document.getElementById('main'));

        function request() {
            var request = new Request(url, {
                method: 'POST',
                credentials: 'include'
            });

            fetch(request).then(response => {
                if (response.ok) {
                    return response.json();
                }
            }).then(json => {
                if (json.code === 1) {
                    makeOption(json.results)
                }
            }).catch(e => { console.error(e)})
        }

        request();
        setInterval(() => { request(); }, timing * 1000);

        function makeOption(results) {
			var now = new Date();
			var nowStr = now.getHours() + '时' + now.getMinutes() + '分' + now.getSeconds() + '秒';
			xdata.push(nowStr);
	
            var series = generateSeries(results);

			var option = {
				title: {
					text:  title,
					subtext: ''
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: legend
				},

				toolbox: {
					show: true,
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						dataView: {readOnly: false},
						magicType: {type: ['line', 'bar']},
						restore: {},
						saveAsImage: {}
					}
				},
				xAxis:  {
					type: 'category',
					boundaryGap: false,
					data: xdata
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						formatter: '{value} 秒'
					}
				},
				series: series 
			};

            myChart.setOption(option);

        }

        function generateSeries(data)
        {
            var series = [];

            targets.forEach (t => {
                if (datas[t.id] == null) {
                    datas[t.id] = [];
                }

                datas[t.id].push(data[t.id].duration);

                if (datas[t.id].length > 20) {
                    datas[t.id].shift();
                }

                if (xdata.length > 20) {
                    xdata.shift();
                }

                series.push({
                    name: t.title,
                    data: datas[t.id],
                    type: 'line',
	                markPoint: {
                        data: [
						    {type: 'max', name: '最大值'},
							{type: 'min', name: '最小值'}
                        ]
                    },
                });
            });

            return series;

        }

	</script>


</body>
</html>
